<template>
	<view class="body">
		<xk-header title="设备巡检"></xk-header>
		<view class="util-bar">
			<view class="search-area">
				<view class="search-input">
					<image class="search-icon" :src="(imgUrl+'/wx/search.png')"></image>
					<input v-model="searchKey" @confirm="searchHandle" confirm-type="search" placeholder="设备编码/设备序号/设备名称" placeholder-class="placeholder"/>
				</view>
			</view>
			<view class="tabs-bar">
				<view class="tabs" scroll-x="true">
					<view v-for="(item, index) of tabs" :key="index" :class="tabIndex === index ? 'item item-a' : 'item'"
							@click="tabChange(index)">{{item.title}}</view>
				</view>
			</view>
			<view class="picker-bar">
				<picker mode="date" :value="dates[tabIndex].date" fields="month"
					@change="dateChange">
					<view class="picker-item">
						<view>{{dates[tabIndex].date || "全部"}}</view>
						<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')"/>
					</view>
				</picker>

				<view class="picker-item" @click="resetSort()">
					<view>重置</view>
				</view>
			</view>
		</view>
		<swiper :current="tabIndex" class="list-swiper"
			@change="(e)=>{tabIndex = e.target.current}"
			:style="'height:'+scrollViewHeight+'px'"
			>
			<swiper-item v-for="(tabItem, tabIndex) of tabs" :key="tabIndex">
				<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="'height:'+scrollViewHeight+'px'">
					<view v-if="tabItem.data.length > 0" class="list-info">
						<view v-for="(item,index) of tabItem.data" :key="item.id" class="data-list">
							<InspecelTask :value="item" :key="item.id"/>
						</view>
					</view>
					<view class="empty-view" v-else>
						<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
						<view>哎呀，该界面暂无内容~</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>

	import InspecelTask from '@/pagesA/components/InspecelTask'
	import moment from 'moment'
	export default {
		components: {InspecelTask},
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				searchKey: '',
				triggered: false,
				scrollViewHeight: 0,
				dates: [{
					date: ""
				}, {
					date: "" //moment().format("YYYY-MM") // 获取当前日期
				}, {
					date: "" //moment().format("YYYY-MM")
				}],
				timeIndex: 0,
				timePicker: [{
					value: '0',
					label: '本周'
				}],
				tabIndex: 0,
				tabs: [{
					index: 0,
					title: "待接单",
					startNum: 0,
					isAll: false,
					data: []
				},{
					index: 1,
					title: "待处理",
					startNum: 0,
					isAll: false,
					data: []
				},{
					index: 2,
					title: "已完成",
					startNum: 0,
					isAll: false,
					data: []
				}],
			};
		},
		onLoad(options) {
			if(options.property_code){
				this.searchKey = options.property_code
			}
			if(options.tabType == 'deal'){
				this.tabIndex = 1
			}
			uni.$on('refreshInspecelTask', ()=>{
				console.log('========refreshInspecelTask')
				this.resetTab()
				this.queryListInfo(true)
			})
		},
		onShow(){
			this.queryListInfo(true)
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		onUnload(){
			uni.$off('refreshInspecelTask')
		},
		methods:{
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				for(let item of this.tabs){
					item.startNum = 0;
					item.isAll = false;
					// item.data = []
				}
				this.queryListInfo(true)
			},
			searchHandle(){
				for(let item of this.tabs){
					item.startNum = 0;
					item.isAll = false;
				}
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},
			async queryListInfo(flag) {
				console.log('queryListInfo',this.tabs)
				let startNum = this.tabs[this.tabIndex].startNum;
				if(flag === true && startNum != 0) {
					this.stopRefresh()
					return;
				}

				if(this.tabs[this.tabIndex].isAll) {
					this.stopRefresh()
					return; // 加载完成
				}

				let params = {
					start: startNum
				}

				if (this.dates[this.tabIndex].date) {
					params.dateMonth = this.dates[this.tabIndex].date
				}
				if(this.searchKey){
					params.searchKey = this.searchKey
				}

				let res = null
				if(this.tabIndex == 0){
					res = await this.$api.baseData_getMyTask_inspecel_accept(params)
					res = res.taskAccepteList
				}else if(this.tabIndex == 1){
					res = await this.$api.baseData_getMyTask_inspecel_deal(params)
					res = res.taskDealList
				}else if(this.tabIndex == 2){
					res = await this.$api.baseData_getMyTask_inspecel_complete(params)
					res = res.taskCompleteList
				}
				if(res.length == 0 && this.tabs[this.tabIndex].data.length == 0){
					this.stopRefresh()
					return
				}
				if(res.length < 20){
					this.tabs[this.tabIndex].isAll = true
				}
				console.log('res', res)
				if(this.tabs[this.tabIndex].startNum == 0){
					this.tabs[this.tabIndex].data = res
				}else{
					this.tabs[this.tabIndex].data = this.tabs[this.tabIndex].data.concat(res)
				}
				this.tabs[this.tabIndex].startNum += 20
				console.log('this.tabs', this.tabs)
				this.stopRefresh()
			},
			resetSort() {
				if (this.dates[this.tabIndex].date) {
					this.dates[this.tabIndex].date = ""
					this.resetTab()
					this.queryListInfo()
				}
			},
			resetTab(){
				for(let item of this.tabs){
					item.startNum = 0;
					item.isAll = false;
					item.data = []
				}
			},
			dateChange(e) {
				if (this.dates[this.tabIndex].date !== e.detail.value) {
					this.dates[this.tabIndex].date = e.detail.value
					this.resetTab();
					this.queryListInfo()
				}
			},
			reloadData() {
				this.resetTab();
				this.queryListInfo()
			},
			tabChange(index) {
				this.tabIndex = index
				this.queryListInfo();
			},
			timePickerHandle(e){
				this.timeIndex = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs-bar{
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	// justify-content: space-between;
	padding: 0 30rpx;
	.tabs{
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		flex: 1;
		.item{
			display: inline-block;
			height: 65rpx;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #333333;
			border-bottom: 6rpx solid rgba(#2C72FF, 0);
		}
		.item-a {
			font-weight: bolder;
			border-bottom: 6rpx solid #2C72FF;
		}

	}
}
.search-area{
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	.search-input{
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		display: flex;
		flex: 1;
		align-items: center;
		.search-icon{
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx 0 30rpx;
		}
		input{
			height: 80rpx;
			font-size: 28rpx;
			flex: 1;
		}
	}
}
.picker-bar{
	height: 88rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: #F8F8F8;
	.picker-item{
		font-size: 28rpx;
		font-weight: bolder;
		color: #333333;
		display: flex;
		align-items: center;
		margin-right: 100rpx;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}
	}
}
.list-info {
	margin: 0 30rpx;
	padding-bottom: 30rpx;
	.list-swiper{
		height: 1000rpx;
	}
	.data-list{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 20rpx 0;
		margin-bottom: 20rpx;
		.data-item{
			// display: flex;
			// margin-bottom: 30rpx;
			.order-type{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				text{
					font-weight: bolder;
				}
				.type{
					font-size: 24rpx;
					font-weight: bolder;
					padding: 12rpx;
					border-radius: 4rpx;
				}
				.red{
					color: #FF3737;
					background-color: #FFEFEF;
				}
				.yellow{
					color: #FF972C;
					background-color: #FFF8EF;
				}
				.blue{
					color: #2C72FF;
					background-color: rgba($color: #A5C2FF, $alpha: .16);
				}
			}
			.order-info{
				margin: 20rpx 0;
				.info-item{
					display: flex;
					font-size: 28rpx;
					color: #333333;
					line-height: 50rpx;
					.key{
						min-width: 150rpx;
						font-size: 28rpx;
						color: #999999;
					}
					.info-imgs{
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 10rpx;
						.img-item{
							width: 120rpx;
							height: 120rpx;
							margin: 2rpx 2rpx 0 0;
						}
					}
				}
				.error{
					color: #FF3737;
				}
			}
			.handle-btn{
				border-top: 1px solid #F5F5F5;
				height: 95rpx;
				margin-top: 30rpx;
				display: flex;
				> view{
					height: 95rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					font-weight: bolder;
					color: #333333;
					flex: 1;
				}
				& :last-child{
					color: #0055FE;
				}
			}
			.target-info{
				flex: 1;
				display: flex;
				.img{
					width: 260rpx;
					height: 195rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.top{
					.name{
						font-size: 28rpx;
						font-weight: bolder;
						color: #333333;
					}
					.desc{
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
				.fee{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					.amount{
						font-size: 36rpx;
						color: #FF3737;
					}
				}
			}
		}
	}
}
</style>
